// 新增角色抽屉

import { Button, Col, Drawer, Form, Input, message, Row, Space } from "antd";
import { FC, forwardRef, useImperativeHandle, useRef, useState } from "react";
import MenuCheck, { MenuCheckInit } from "@/components/menu-check";
import { addRole, editRole } from "@/services/role.ts";

const OpDrawerFooter: FC<{
  onClose: () => void;
  onSave: () => void;
}> = ({ onClose, onSave }) => {
  return (
    <Space style={{ display: "flex", justifyContent: "flex-end" }}>
      <Button type="default" onClick={onClose}>
        取消
      </Button>
      <Button type="primary" onClick={onSave}>
        保存
      </Button>
    </Space>
  );
};

// forwardRef<T, R>
// T - ref 的类型
// R - props 的类型
const OpDrawer = forwardRef<unknown, { onSuccess: () => void }>(
  ({ onSuccess }, ref) => {
    const [visible, setVisible] = useState(false);
    const [formIns] = Form.useForm();
    const menuCheckRef = useRef<MenuCheckInit>(null);

    // open方法
    const open = (data: API.RoleObject) => {
      // 1. 打开 Drawer
      setVisible(true);
      // 2. 根据传递过来的参数做数据的回填
      console.log("data", data);
      if (data) {
        // 编辑
        // 回填表单的三个字段
        formIns.setFieldsValue({
          id: data.id,
          name: data.name,
          label: data.label,
          remark: data.remark,
        });
        // 回填 MenuCheck 组件的数据
        //    问题1. 当前 OpDrawer 组件第一次显示时设置不上。
        //            给 Drawer 设置 forceRender 预先渲染子元素
        //    问题2. 数据设置不正确的问题
        //            data.menuIdList 过滤出叶子节点的Id，然后来设置
        //            [3, 6, 7, 8, 9, 2]
        menuCheckRef.current?.set(data.menuIdList);
      } else {
        // 新增
        formIns.setFieldsValue({
          id: "",
          name: "",
          label: "",
          remark: "",
        });
        menuCheckRef.current?.set([]);
      }
    };

    // close方法
    const close = () => {
      setVisible(false);
    };

    // const onAdd = async () => {
    //   // 1. 获取数据框输入的数据, name, label, remark
    //   const values = formIns.getFieldsValue();
    //   console.log("values", values);
    //   // 2. 单独获取权限数据
    //   const checkedKeys = menuCheckRef.current?.get();
    //   console.log("checkedKeys", checkedKeys);
    //   // 3. 调用接口
    //   await addRole({ ...values, menuIdList: checkedKeys });
    //   // 4. 成功
    //   message.success("新增成功");
    //   // 5. 更新数据
    //   onSuccess();
    //   // 6. 关闭 Drawer
    //   close();
    // };
    //
    // const onEdit = async () => {
    //   // 1. 获取数据框输入的数据, name, label, remark
    //   const values = formIns.getFieldsValue();
    //   console.log("values", values);
    //   // 2. 单独获取权限数据
    //   const checkedKeys = menuCheckRef.current?.get();
    //   console.log("checkedKeys", checkedKeys);
    //   // 3. 调用接口
    //   await editRole({ ...values, menuIdList: checkedKeys });
    //   // 4. 成功
    //   message.success("编辑成功");
    //   // 5. 更新数据
    //   onSuccess();
    //   // 6. 关闭 Drawer
    //   close();
    // };

    // 保存按钮点击
    const onSave = async () => {
      // 触发表单校验
      await formIns.validateFields();
      // 1. 获取数据框输入的数据, name, label, remark, id
      const values = formIns.getFieldsValue();
      console.log("values", values);
      // 2. 单独获取权限数据
      const checkedKeys = menuCheckRef.current?.get();
      console.log("checkedKeys", checkedKeys);
      // 3. 调用接口, 根据 values.id 是否存在来控制便用不同的接口
      if (values.id) {
        await editRole({ ...values, menuIdList: checkedKeys });
      } else {
        // TODO. 看后端接口是否支持 id 字段传递一个空字符串，如果不支持则需要 删除该字段
        delete values.id;
        await addRole({ ...values, menuIdList: checkedKeys });
      }

      // 4. 成功
      message.success("新增成功");
      // 5. 更新数据
      onSuccess();
      // 6. 关闭 Drawer
      close();
    };

    // 控制对外的暴露
    useImperativeHandle(ref, () => ({ open }), []);

    return (
      <Drawer
        title="新增"
        forceRender={true}
        open={visible}
        footer={<OpDrawerFooter onClose={close} onSave={onSave} />}
        onClose={() => setVisible(false)}
      >
        <Form form={formIns}>
          {/* 隐藏表单域 hidden */}
          <Form.Item label="Id" name="id" hidden>
            <Input />
          </Form.Item>

          <Row gutter={10}>
            <Col span={12}>
              <Form.Item
                label="名称"
                name="name"
                labelCol={{ span: 8 }}
                rules={[{ required: true, message: "必须" }]}
              >
                <Input placeholder="请填写名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="标识"
                name="label"
                labelCol={{ span: 8 }}
                rules={[{ required: true, message: "必须" }]}
              >
                <Input placeholder="请填写标识" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="备注" name="remark" labelCol={{ span: 4 }}>
                <Input.TextArea placeholder="请填写备注" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="权限" labelCol={{ span: 4 }}>
                <MenuCheck ref={menuCheckRef} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    );
  }
);

export type OpDrawerInit = {
  open: (data?: API.RoleObject) => void;
};

export default OpDrawer;
